<template>
	<div class="anchorDetail">
		<div class="anchor">
			<div class="anchor_item">
				<div class="anchor_item_left">
					<image src="https://wx.sjcmhz.com/static/logo.png" mode=""></image>
				</div>
				<div class="anchor_item_right">
					<div class="anchor_item_right_top">
						<div class="anchor_item_right_top_left">
							{{anchorInfo.name || ''}}
							<image src="https://wx.sjcmhz.com/static/image/pageA/nan.png" mode=""></image>
						</div>
						<div class="anchor_item_right_top_right" :class="'roomColor'+anchorInfo.status">
							{{anchorInfo.status | statusFilter}}
						</div>
					</div>
					<div class="anchor_item_right_center">
						<div class="anchor_item_right_center_items">
							{{anchorInfo.type || ''}}
						</div>
						<div class="anchor_item_right_center_right">
							<!-- 待改提点 -->
						</div>
					</div>
					<div class="anchor_item_right_bottom">
						{{roomInfo.address}}{{roomInfo.room}}
						<!-- 和而泰1栋1401
						 -->
						<!-- {{anchorInfo.floor_id || ''}} {{anchorInfo.storey_id || ''}} {{anchorInfo.room_id || ''}} -->
					</div>
				</div>
			</div>
			<div class="tabCont">
				<u-tabs :list="list1" lineColor="#2E61FF" lineWidth="20"
					itemStyle="padding-left: 9.5%; padding-right: 9.5%; height: 44px;" :activeStyle="{
				    color: '#2E61FF',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				    color: '#999999',
				    transform: 'scale(1)'
				}" @change="changeEvent()"></u-tabs>
			</div>

			<div class="anchorItems" v-if="tabIndex == 0">
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						姓名
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.name' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						性别
					</div>
					<div class="inviteIndexItems_right" @click="showSex = true; hideKeyboard()">
						<!-- <input type="text" value="" placeholder="请输入性别" /> -->
						<input v-model="anchorInfo.sex" style="text-align: right!important;" disabled
							disabledColor="#ffffff" placeholder="请选择性别" border="none"></input>
						<u-icon slot="right" name="arrow-right" color='#c0c4cc'></u-icon>
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						身份证号
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.name' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						联系方式
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.phone' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						抖音(大号)
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.big_doyin' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						运营
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.operate' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						主播花名
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.nickname' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						是否养宠
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.pet' placeholder="请输入" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						到达时间
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" v-model='anchorInfo.addresstime' disabled placeholder="" />
					</div>
				</div>
				

			</div>

			<!-- 1111111 -->
			<div class="anchorItems" v-if="tabIndex == 1">
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						房间编号
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" disabled v-model='roomInfo.room' placeholder="" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						房间类型
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" disabled v-model='roomInfo.type' placeholder="" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						房间地址
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" disabled v-model='roomInfo.address' placeholder="" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						负责楼长
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" disabled v-model='roomInfo.storey_phone' placeholder="" />
					</div>
				</div>
				<div class="inviteIndexItems">
					<div class="inviteIndexItems_left">
						实际入住时间
					</div>
					<div class="inviteIndexItems_right">
						<input type="text" value="" disabled v-model='roomInfo.addtime' placeholder="" />
					</div>
				</div>
			</div>
			<!--  -->
			<!-- list -->
			<div class="pagesList" v-if="tabIndex == 2">
				<page-list-gd :list='GDList' @upDate='upDate'></page-list-gd>
			</div>

		</div>

		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<!-- btn -->
		<div class="bottomBtn">
			<div class="bottomBtn1" @click='changeInfo' v-if='tabIndex != 2 && tabIndex != 1'>
				保存信息
			</div>
			<div class="bottomBtn2" @click='qingtuiEvent()' v-if="anchorInfo.status != 4 && anchorInfo.status !=3">
				清退
			</div>
			<div class="bottomBtn3" @click='huanEvent()' v-if="anchorInfo.status != 4 && anchorInfo.status !=3">
				换房
			</div>
		</div>

		<u-modal :show="show" @confirm="confirm" :title='modalTitle' @cancel='show=!show' ref="uModal"
			showCancelButton></u-modal>

		<frool v-if="froolShow" :froolShow='froolShow' @confirm='FroolConfirm' @cancel='froolShow=false'></frool>
	</div>
</template>

<script>
	import frool from '@/pages/server/components/frool.vue'
	import pageListGd from '@/pagesA/components/list.vue'
	export default {
		components: {
			frool,
			pageListGd
		},
		filters: {
			statusFilter(v) {
				var s = ''
				// 入住状态 -1邀约 0保存草稿 1审核中 2审核通过 3待搬家 4已搬离
				switch (v) {
					case '-1':
						s = '邀约'
						break;
					case '0':
						s = '保存草稿'
						break;
					case '1':
						s = '审核中'
						break;
					case '2':
						s = '审核通过'
						break;
					case '3':
						s = '待搬家'
						break;
					case '4':
						s = '已搬离'
						break;
				}
				return s
			}
		},
		data() {
			return {
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},

				],
				anchorInfo: {},
				roomInfo:{},
				showSex: false,
				tabIndex: 0,
				show: false,
				froolShow: false,
				isHuan: 1,
				anchor_id: '',
				modalTitle: '',
				list1: [{
					name: '基础信息',
					status: 0
				}, {
					name: '关联房间',
					status: 1
				}, {
					name: '服务工单',
					status: 2
				}],
				GDList:[]
			}
		},
		onLoad(opt) {
			this.anchor_id = opt.id || 8
			this.getUserInfo(opt.id)
		},
		methods: {
			async getUserInfo(id) {
				const {
					data
				} = await this.$request(this.$Api.anchorDetai, {
					anchor_id:id
				}, "POST")
				if (data.code !== 0) return
				this.anchorInfo = data.data.list
				this.roomInfo = data.data
			},
			changeEvent(e) {
				this.tabIndex = e.index
				if (e.index == 2) {
					this.getGd()
				}
				console.log("eee", e)
			},
			// roomEquipment
			async getGd() {
				const {
					data
				} = await this.$request(this.$Api.anchorWork, {
					anchor_id: this.anchor_id
				}, "POST")
				if (data.code !== 0) return
				this.GDList = data.data.list
			},
			sexSelect(e) {
				this.$set(this.anchorInfo, 'sexs', e.name)
				this.showSex = false
				console.log("e.name", e)
			},
			async changeInfo() {
				const {
					data
				} = await this.$request(this.$Api.anchorAuth, this.anchorInfo, "POST")
				if (data.code !== 0) return
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
			},
			// 清退
			async qingtuiEvent() {
				this.modalTitle = '是否清退？'
				this.show = true
				this.isHuan = 1

			},
			// 换房
			async huanEvent() {
				// this.modalTitle = '是否换房？'
				// this.isHuan = 2
				// this.shows = true
				this.froolShow = true
			},
			async confirm() {
				var params = {
					anchor_id: this.anchor_id,
				}
				const {
					data
				} = await this.$request(this.$Api.anchorExit, params, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			},
			async FroolConfirm(e) {
				var params = {
					anchor_id: this.anchor_id,
					room_id: e.room_id,
					storey_id: e.storey_id,
					floor_id: e.floor_id,
				}
				const {
					data
				} = await this.$request(this.$Api.indexsExchange, params, "POST")
				if (data.code !== 0) return
				this.show = false
				uni.showToast({
					title: "操作成功",
					mask: true,
					icon: "none",
					duration: 1000
				})
			}


		}
	}
</script>

<style lang="less">
	.anchor {
		width: 750rpx;
		height: 100% !important;
		margin-bottom: 200rpx;

		.tabCont {
			background: #fff;
		}

		.inviteIndexItems {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			width: 750rpx;
			height: 100rpx;
			border-bottom: 1rpx solid #eee;
			background: #fff;
			padding: 0 44rpx;
			box-sizing: border-box;

			.inviteIndexItems_left {
				color: #494949;
				font-size: 30rpx;
				width: 240rpx;
			}

			.inviteIndexItems_right {
				color: #999999;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				width: calc(100% - 240rpx);
				text-align: right !important;

				input {
					text-align: right;
					width: 100%;
				}
			}
		}

		.anchor_item {
			width: 100%;
			min-height: 198rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			margin: 28rpx auto 0 auto;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
		}

		.anchor_item_left {
			width: 120rpx;
			height: 120rpx;
			margin-right: 34rpx;
			min-width: 120rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.anchor_item_right {

			.anchor_item_right_top,
			.anchor_item_right_center,
			.anchor_item_right_bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 480rpx;
			}

			.anchor_item_right_top_left {
				font-size: 32rpx;
				font-weight: 500;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-left: 8rpx;
				}
			}

			.anchor_item_right_top_right {
				font-size: 26rpx;
				color: #666;
			}

			.anchor_item_right_center {
				margin-top: 10rpx;
			}

			.anchor_item_right_center_items {
				font-size: 26rpx;
				min-width: 6rpx;
				// height: 34rpx;
				padding: 2rpx 12rpx;
				box-sizing: border-box;
				background: #2E61FF;
				color: #fff;
			}

			.anchor_item_right_center_right {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}

			.anchor_item_right_bottom {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}

		// anchorItems

		.anchorItems {
			margin-top: 28rpx;
		}
	}

	.bottomBtn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 750rpx;
		height: 116rpx;
		background: #FFFFFF;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;

		.bottomBtn1 {
			width: 164rpx;
			height: 68rpx;
			background: #FFFFFF;
			border: 2rpx solid #2D60FF;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			box-sizing: border-box;
			margin-left: 20rpx;
		}

		.bottomBtn2 {
			width: 164rpx;
			height: 68rpx;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			background: #D0021B;
			color: #fff;
			margin-left: 20rpx;
		}

		.bottomBtn3 {
			width: 164rpx;
			height: 68rpx;
			font-size: 28rpx;
			text-align: center;
			color: #2D60FF;
			line-height: 68rpx;
			background: #2D60FF;
			color: #fff;
			margin-left: 20rpx;
		}
	}
</style>